<template>
    <div class="template-index-Lu">
        <div style="margin:0 auto;display: flex;flex-wrap:wrap;padding:10px 30px;">
            <span>人事管理</span>
            <!-- <div class="aaaaaaa" @click="addFormClick(item.addStr)" v-for="(item,index) in moduleItem1" style="padding:30px;text-align:center">
                <div  class="menuDiv" :style="{height:(windowInnerHeight / 5)+'px',width:(windowInnerHeight / 5)+'px',}">
                    <i
                        v-if="iconType(item.icon)"
                        class="menuDiv-icon iconfont"
                        :class="item.icon"
                        >
                    </i>
                    <ych-icon
                        v-else
                        class="menuDiv-icon"
                        :type="item.icon"
                        >
                    </ych-icon>
                    <span style="padding-top:8px">{{ item.name }}</span>
                </div>
            </div> -->
                <div
                    class="menuDiv"
                    @click="addFormClick(item.addStr)"
                     v-for="(item,index) in moduleItem1" :key="index"
                    style="">
                    <div>
                        <!-- <span class="badge" v-if="item.count !== 0">{{ itemCount(item.count) }}</span> -->
                        <i
                            v-if="item.icon && iconType(item.icon)"
                            class="menuDiv-icon iconfont"
                            :class="item.icon"
                            >
                        </i>
                        <ych-icon
                            v-else
                            class="menuDiv-icon"
                            :type="item.icon"
                            >
                        </ych-icon>
                    </div>
                    <span>{{ item.name }}</span>
                </div>
        </div>
        <div style="margin:0 auto;display: flex;flex-wrap:wrap;padding:10px 30px;">
            <span>行政管理</span>
            <!-- <div class="aaaaaaa" @click="addFormClick(item.addStr)" v-for="(item,index) in moduleItem2" style="padding:30px;text-align:center">
                <div  class="menuDiv" :style="{height:(windowInnerHeight / 5)+'px',width:(windowInnerHeight / 5)+'px',}">
                    <i
                        v-if="iconType(item.icon)"
                        class="menuDiv-icon iconfont"
                        :class="item.icon"
                        >
                    </i>
                    <ych-icon
                        v-else
                        class="menuDiv-icon"
                        :type="item.icon"
                        >
                    </ych-icon>
                    <span style="padding-top:8px">{{ item.name }}</span>
                </div>
            </div> -->
            <div
                    class="menuDiv"
                    @click="addFormClick(item.addStr)"
                     v-for="(item,index) in moduleItem2" :key="index"
                    style="">
                    <div>
                        <!-- <span class="badge" v-if="item.count !== 0">{{ itemCount(item.count) }}</span> -->
                        <i
                            v-if="item.icon && iconType(item.icon)"
                            class="menuDiv-icon iconfont"
                            :class="item.icon"
                            >
                        </i>
                        <ych-icon
                            v-else
                            class="menuDiv-icon"
                            :type="item.icon"
                            >
                        </ych-icon>
                    </div>
                    <span>{{ item.name }}</span>
                </div>
        </div>
        <!-- <div v-if="ceshi()" style="padding: 50px;">
          <a-button @click="funtion('省/市')">省/市-地址选择</a-button>
          <a-button @click="funtion('省/市/区')">省/市/区-地址选择</a-button>
          {{ address }}
        </div> -->
        <selectProvinceCity
          ref="aaa"
          :selectLevel="selectLevel"
          @selectAddressHandle="selectAddressHandle">
        </selectProvinceCity>
        <handleModal ref="handleModalRef"></handleModal>
    </div>
</template>
<script>
import  selectProvinceCity  from '@/components/province-city/index.vue'
import handleModal from '../modal/handleModal.vue'
import store from '@/store'
export default {
    components:{
        handleModal,selectProvinceCity
    },
    props:{
    },
    data(){
        return{
            moduleItem1: [
                {
                    'name':'请假',
                    'icon':'clock-circle',
                    'addStr':'请假',
                },{
                    'name':'离岗',
                    'icon':'logout',
                    'addStr':'离岗',
                },{
                    'name':'出差',
                    'icon':'credit-card',
                    'addStr':'出差',
                },{
                    'name':'加班值班',
                    'icon':'plus-circle',
                    'addStr':'加班',
                },
                // {
                //     'name':'工资条',
                //     'icon':'credit-card',
                //     'addStr':'工资条',
                // },
            ],
            moduleItem2: [
                {
                    'name':'行政事务审批',
                    'icon':'audit',
                    'addStr':'行政',
                },{
                    'name':'宣传信息审批',
                    'icon':'pic-right',
                    'addStr':'宣传',
                },{
                    'name':'办公用品领用',
                    'icon':'highlight',
                    'addStr':'办公用品',
                },{
                    'name':'会议室',
                    'icon':'home',
                    'addStr':'会议室',
                },
            ],
            menuColorList: [
                'background-image: linear-gradient(135deg, rgba(28, 157, 208, 0.8), rgba(28, 157, 208, 0.5));',
                'background-image: linear-gradient(135deg, rgba(115, 197, 150, 0.8), rgba(115, 197, 150, 0.5));',
                'background-image: linear-gradient(135deg, rgba(67, 140, 215, 0.8), rgba(67, 140, 215, 0.5));',
                'background-image: linear-gradient(135deg, rgba(117, 113, 220, 0.8), rgba(117, 113, 220, 0.5));',
            ],
            windowInnerHeight:window.innerHeight - 80 - 120,
            windowInnerWidth:window.innerWidth,
            address: '',
            selectLevel: '',
        }
    },
    watch:{

    },
    mounted(){
    },
    methods:{
      ceshi(){
        // //console.log(store.getters.userInfo)
        if(store.getters.userInfo.realname == '管理员'){
          return true
        } else {
          return false
        }
      },
      funtion(val){
        this.selectLevel = val
        this.$refs.aaa.visible = true
      },
      addFormClick(type){
          this.$nextTick(_ => {
              this.$refs.handleModalRef.addClick(type)
          })
      },
      iconType(name){
          if(name.substr(0,4) == 'spcy'){
              return true
          } else {
              return false
          }
      },
      selectAddressHandle(val,form){
        //console.log('确定的地址数据：',val)
        //console.log('确定的地址数据--分开：',form)
        this.address = val
      }
    },
}
</script>
<style>
@import url('../css/oaLess.css');
@import url('../css/oaClass.css');
</style>
<style lang="less" scoped>
// .menuDiv {
//     position: relative;
//     display: inline-block;
//     text-align: center;
//     background: #fff;
//     font-size: 16px;
//     border-radius: 30px;
//     box-shadow: 10px 10px 20px rgba(136,136,136,1);
//     -webkit-transition: all 0.5s ease;
//     -moz-transition: all 0.5s ease;
//     -o-transition: all 0.5s ease;
//     //
//     display: flex;
//     flex-direction: column;
//     justify-content: center;
//     align-items: center;
//     .menuDiv-icon {
//             width: 50px;
//             height: 50px;
//             border-radius: 50%;
//             color: #fff;
//             line-height: 55px;
//             font-size: 26px;
//             margin-bottom: 5px;
//         }
//         .badge {
//             position: absolute;
//             top: -5px;
//             right: -5px;
//             width: 25px;
//             height: 25px;
//             background-color: red;
//             color: white;
//             border-radius: 50%;
//             text-align: center;
//             line-height: 25px;
//             font-size: 16px;
//             -webkit-transition: all 0.5s ease;
//             -moz-transition: all 0.5s ease;
//             -o-transition: all 0.5s ease;
//         }
// }
// .menuDiv:hover {
//         font-size: 18px;
//         margin-top: -25px;
//         .menuDiv-icon {
//             font-size: 28px;
//         }
//         .badge {
//             top: 0;
//             right: 0;
//         }
//     }
// .aaaaaaa:nth-child(4n+1) .menuDiv > .menuDiv-icon {
//     background-image: linear-gradient(135deg, rgba(28, 157, 208, 0.8);
//     rgba(28, 157, 208, 0.5))
// }
// .aaaaaaa:nth-child(4n+2) .menuDiv > .menuDiv-icon {
//     background-image: linear-gradient(135deg, rgba(115, 197, 150, 0.8);
//         rgba(115, 197, 150, 0.5))
// }
// .aaaaaaa:nth-child(4n+3) .menuDiv > .menuDiv-icon {
//     background-image: linear-gradient(135deg, rgba(67, 140, 215, 0.8);
//         rgba(67, 140, 215, 0.5))
// }
// .aaaaaaa:nth-child(4n+4) .menuDiv > .menuDiv-icon {
//     background-image: linear-gradient(135deg, rgba(117, 113, 220, 0.8);
//     rgba(117, 113, 220, 0.5))
// }
.menuDiv {
    // width: 100px;
    height: 100px;
    width: 150px;
    // margin-right: 20px;
    // background-color: aquamarine;
    display: inline-block;
    position: relative;
    text-align: center;
    padding:30px;text-align:center;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    .badge {
        position: absolute;
        top: -10px;
        right: 0px;
        width: 25px;
        height: 25px;
        background-color: red;
        color: white;
        border-radius: 50%;
        text-align: center;
        line-height: 25px;
        font-size: 16px;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
    }
    .menuDiv-icon {
        width: 70px;
        height: 70px;
        line-height: 70px;
        font-size: 26px;
        color: #fff;
        border-radius: 50%;
        margin: 0 auto;
        display: inline-block;
        text-align: center;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
    }
}
.menuDiv:hover {
    font-size: 16px;
    margin-top: -25px;
    .menuDiv-icon {
        font-size: 32px;
        width: 80px;
        height: 80px;
    }
}
.menuDiv:nth-child(5n+1) div > .menuDiv-icon {
    background-image: linear-gradient(135deg, rgba(28, 157, 208, 0.8);
    rgba(28, 157, 208, 0.5))
}
.menuDiv:nth-child(5n+2) div > .menuDiv-icon {
    background-image: linear-gradient(135deg, rgba(115, 197, 150, 0.8);
      rgba(115, 197, 150, 0.5))
}
.menuDiv:nth-child(5n+3) div > .menuDiv-icon {
    background-image: linear-gradient(135deg, rgba(67, 140, 215, 0.8);
      rgba(67, 140, 215, 0.5))
}
.menuDiv:nth-child(5n+4) div > .menuDiv-icon {
    background-image: linear-gradient(135deg, rgba(117, 113, 220, 0.8);
    rgba(117, 113, 220, 0.5))
}
.menuDiv:nth-child(5n+5) div > .menuDiv-icon {
    background-image: linear-gradient(135deg, rgba(233, 137, 161, 0.8);
    rgba(220, 156, 113, 0.5))
}
</style>
